<template>
	<div class="field-wrapper" :class="{'design-time-bottom-margin': !!this.thisDesigner}">
		<el-form-item v-if="!!thisField.formItemFlag && (!thisField.options.hidden || (thisDesignState === true))"
					  :label="label" :label-width="labelWidth + 'px'"
					  :title="thisField.options.labelTooltip"
					  :rules="thisRules" :prop="getPropName()"
					  :class="[selected ? 'selected' : '', labelAlign, customClass, thisField.options.required ? 'required' : '']"
					  @click.stop="selectField(thisField)">
			<template #label v-if="thisField.options.labelHidden==false">
				<span v-if="!!thisField.options.labelIconClass" class="custom-label">
				  <template v-if="thisField.options.labelIconPosition === 'front'">
					<template v-if="!!thisField.options.labelTooltip">
					  <el-tooltip :content="thisField.options.labelTooltip" effect="light">
					  	<el-icon style="vertical-align: -0.15em;height: 1.1em;width: 1.1em">
							<component :is="thisField.options.labelIconClass" style="height: 1.1em;width: 1.1em"/>
						</el-icon>
					  </el-tooltip>{{label}}</template>
					<template v-else>
						<el-icon style="vertical-align: -0.15em;height: 1.1em;width: 1.1em">
							<component :is="thisField.options.labelIconClass" style="height: 1.1em;width: 1.1em"/>
						</el-icon>
						{{label}}</template>
				  </template>
				  <template v-else-if="thisField.options.labelIconPosition === 'rear'">
					<template v-if="!!thisField.options.labelTooltip">
					  {{label}}<el-tooltip :content="thisField.options.labelTooltip" effect="light">
						<el-icon style="vertical-align: -0.15em;height: 1.1em;width: 1.1em">
							<component :is="thisField.options.labelIconClass" style="height: 1.1em;width: 1.1em"/>
						</el-icon>
					</el-tooltip></template>
					<template v-else>
					  {{label}}
						<el-icon style="vertical-align: -0.15em;height: 1.1em;width: 1.1em">
							<component :is="thisField.options.labelIconClass" style="height: 1.1em;width: 1.1em"/>
						</el-icon>
					</template>
				  </template>
				</span>
			</template>
			<slot></slot>
		</el-form-item>

		<template v-if="!!this.thisDesigner">
			<div class="field-action" v-if="thisDesigner.selectedId === thisField.id">
				<i :title="$t('designer.hint.selectParentWidget')"
				   @click.stop="selectParentWidget(thisField)">
					<el-icon style="vertical-align: -0.15em;height: 1.1em;width: 1.1em">
						<el-icon-back style="height: 1.1em;width: 1.1em"/>
					</el-icon>
				</i>
				<i v-if="!!thisParentList && (thisParentList.length > 1)" :title="$t('designer.hint.moveUpWidget')"
				   @click.stop="moveUpWidget(thisField)">
					<el-icon style="vertical-align: -0.15em;height: 1.1em;width: 1.1em">
						<el-icon-top style="height: 1.1em;width: 1.1em"/>
					</el-icon>
				</i>
				<i v-if="!!thisParentList && (thisParentList.length > 1)" :title="$t('designer.hint.moveDownWidget')"
				   @click.stop="moveDownWidget(thisField)">
					<el-icon style="vertical-align: -0.15em;height: 1.1em;width: 1.1em">
						<el-icon-bottom style="height: 1.1em;width: 1.1em"/>
					</el-icon>
				</i>
				<i :title="$t('designer.hint.remove')" @click.stop="removeFieldWidget">
					<el-icon style="vertical-align: -0.15em;height: 1.1em;width: 1.1em">
						<el-icon-delete style="height: 1.1em;width: 1.1em"/>
					</el-icon>
				</i>
			</div>

			<div class="drag-handler background-opacity" v-if="thisDesigner.selectedId === thisField.id">
				<i :title="$t('designer.hint.dragHandler')">
					<el-icon style="vertical-align: -0.15em;height: 1.1em;width: 1.1em">
						<sc-icon-drag-move style="height: 1.1em;width: 1.1em"/>
					</el-icon>
				</i>
				<i>{{$t(`designer.widgetLabel.${thisField.type}`)}}</i>
				<i v-if="thisField.options.hidden === true">
					<el-icon style="vertical-align: -0.15em;height: 1.1em;width: 1.1em">
						<el-icon-hide style="height: 1.1em;width: 1.1em"/>
					</el-icon>
				</i>
			</div>
		</template>
	</div>
</template>

<script>

export default {
	name: "form-item-wrapper",
	mixins: [],
	props: {
		field: Object,
		designer: Object,
		parentWidget: Object,
		parentList: Array,
		indexOfParentList: Number,
		designState: {type: Boolean,default: false},
		subFormRowIndex: { /* 子表单组件行索引，从0开始计数 */
			type: Number,
			default: -1
		},
		subFormColIndex: { /* 子表单组件列索引，从0开始计数 */
			type: Number,
			default: -1
		},
		subFormRowId: { /* 子表单组件行Id，唯一id且不可变 */
			type: String,
			default: ''
		},
		rules: Array,
	},
	inject: ['getFormConfig'],
	computed: {
		formConfig() {
			return this.getFormConfig()
		},
		selected() {
			return !!this.thisDesigner && this.thisField.id === this.thisDesigner.selectedId
		},
		label() {
			if (this.thisField.options.labelHidden) {
				return ''
			}
			return this.thisField.options.label
		},

		labelWidth() {
			if (this.thisField.options.labelHidden) {
				return 0
			}

			if (this.thisField.options.labelWidth) {
				return this.thisField.options.labelWidth
			}

			if (this.thisDesigner) {
				return this.thisDesigner.formConfig.labelWidth
			} else {
				return this.formConfig.labelWidth
			}
		},

		labelAlign() {
			if (this.thisField.options.labelAlign) {
				return this.thisField.options.labelAlign
			}

			if (this.thisDesigner) {
				return this.thisDesigner.formConfig.labelAlign || 'label-left-align'
			} else {
				return this.formConfig.labelAlign || 'label-left-align'
			}
		},

		customClass() {
			return this.thisField.options.customClass ? this.thisField.options.customClass.join(' ') : ''
		},

		subFormName() {
			return this.thisParentWidget ? this.thisParentWidget.options.name : ''
		},

		subFormItemFlag() {
			return this.thisParentWidget ? this.thisParentWidget.type === 'sub-form' : false
		},

	},
	data(){
		return{
			thisRules:this.rules,
			thisSubFormRowId:this.subFormRowId,
			thisSubFormColIndex:this.subFormColIndex,
			thisDesignState:this.designState,
			thisSubFormRowIndex:this.subFormRowIndex,
			thisIndexOfParentList:this.indexOfParentList,
			thisParentList:this.parentList,
			thisParentWidget:this.parentWidget,
			thisField:this.field,
			thisDesigner:this.designer
		}
	},
	watch: {
		'rules': {
			handler(val) {
				if (val) {
					this.thisRules = val
				}
			}
		},
		'subFormRowId': {
			handler(val) {
				if (val) {
					this.thisSubFormRowId = val
				}
			}
		},
		'subFormColIndex': {
			handler(val) {
				if (val) {
					this.thisSubFormColIndex = val
				}
			}
		},
		'designState': {
			handler(val) {
				if (val) {
					this.thisDesignState = val
				}
			}
		},
		'subFormRowIndex': {
			handler(val) {
				if (val) {
					this.thisSubFormRowIndex = val
				}
			}
		},
		'indexOfParentList': {
			handler(val) {
				if (val) {
					this.thisIndexOfParentList = val
				}
			}
		},
		'field': {
			handler(val) {
				if (val) {
					this.thisField = val
				}
			}
		},
		'designer': {
			handler(val) {
				if (val) {
					this.thisDesigner = val
				}
			}
		},
		'parentWidget': {
			handler(val) {
				if (val) {
					this.thisParentWidget = val
				}
			}
		},
		'parentList': {
			handler(val) {
				if (val) {
					this.thisParentList = val
				}
			}
		},
	},
	created() {
		//
	},
	methods: {

		selectField(field) {
			if (this.thisDesigner) {
				this.thisDesigner.setSelected(field)
				this.thisDesigner.emitEvent('field-selected', this.thisParentWidget)  //发送选中组件的父组件对象
			}
		},

		selectParentWidget() {
			if (this.thisParentWidget) {
				this.thisDesigner.setSelected(this.thisParentWidget)
			} else {
				this.thisDesigner.clearSelected()
			}
		},

		moveUpWidget() {
			this.thisDesigner.moveUpWidget(this.thisParentList, this.thisIndexOfParentList)
			this.thisDesigner.emitHistoryChange()
		},

		moveDownWidget() {
			this.thisDesigner.moveDownWidget(this.thisParentList, this.thisIndexOfParentList)
			this.thisDesigner.emitHistoryChange()
		},

		removeFieldWidget() {
			if (this.thisParentList) {
				let nextSelected = null
				if (this.thisParentList.length === 1) {
					if (this.thisParentWidget) {
						nextSelected = this.thisParentWidget
					}
				} else if (this.thisParentList.length === (1 + this.thisIndexOfParentList)) {
					nextSelected = this.thisParentList[this.thisIndexOfParentList - 1]
				} else {
					nextSelected = this.thisParentList[this.thisIndexOfParentList + 1]
				}
				this.$nextTick(() => {
					this.thisParentList.splice(this.thisIndexOfParentList, 1)
					this.thisDesigner.setSelected(nextSelected)
					this.thisDesigner.emitHistoryChange()
				})
			}
		},

		getPropName() {
			if (this.subFormItemFlag && !this.thisDesignState) {
				return this.subFormName + "." + this.thisSubFormRowIndex + "." + this.thisField.options.name + ""
			} else {
				return this.thisField.options.name
			}
		},


	}
}
</script>

<style lang="scss" scoped>
@import "../../../../../assets/formdesigner/styles/global.scss";

.design-time-bottom-margin {
	margin-bottom: 5px;
}
.el-form-item{
	margin-bottom: 0px !important;
}
.field-wrapper {
	position: relative;
	margin: 10px;
	.field-action{
		position: absolute;
		//bottom: -24px;
		bottom: 0;
		right: -2px;
		height: 22px;
		line-height: 22px;
		background: $--color-primary;
		z-index: 9;

		i {
			font-size: 14px;
			color: #fff;
			margin: 0 3px;
			cursor: pointer;
		}
	}

	.drag-handler {
		position: absolute;
		top: 0;
		//bottom: -22px;  /* 拖拽手柄位于组件下方，有时无法正常拖动，原因未明？？ */
		left: -1px;
		height: 20px;
		line-height: 20px;
		//background: $--color-primary;
		z-index: 9;

		i {
			font-size: 12px;
			font-style: normal;
			color: #fff;
			margin: 4px;
			cursor: move;
		}

		&:hover {
			//opacity: 1;
			background: $--color-primary;
		}
	}
}

.el-form-item {
	//margin-bottom: 0 !important;
	//margin-bottom: 6px;

	//margin-top: 2px;
	position: relative;

	:deep(.el-form-item__label) {
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	:deep(.el-form-item__content) {
		//position: unset;  /* TODO: 忘了这个样式设置是为了解决什么问题？？ */
	}

	span.custom-label i {
		margin: 0 3px;
	}

	/* 隐藏Chrome浏览器中el-input数字输入框右侧的上下调整小箭头 */
	:deep(.hide-spin-button) input::-webkit-outer-spin-button,
	:deep(.hide-spin-button) input::-webkit-inner-spin-button {
		-webkit-appearance: none !important;
	}

	/* 隐藏Firefox浏览器中el-input数字输入框右侧的上下调整小箭头 */
	:deep(.hide-spin-button) input[type="number"] {
		-moz-appearance: textfield;
	}
}

.required :deep(.el-form-item__label)::before {
	content: '*';
	color: #F56C6C;
	margin-right: 4px;
}

.static-content-item {
	min-height: 20px;
	display: flex;  /* 垂直居中 */
	align-items: center;  /* 垂直居中 */

	:deep(.el-divider--horizontal) {
		margin: 0;
	}
}

.el-form-item.selected, .static-content-item.selected {
	outline: 2px solid $--color-primary;
}

:deep(.label-left-align) .el-form-item__label {
	text-align: left;
	justify-content: flex-start !important;
}

:deep(.label-center-align) .el-form-item__label {
	text-align: center;
	justify-content: center !important;
}

:deep(.label-right-align) .el-form-item__label {
	text-align: right;
	justify-content: flex-end !important;
}


</style>
